// 咨询者管理页面
<template>
  <div class="all">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="formInline.tel" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getStudentInfo()" size="small">查询</el-button>
        <el-button type="warning" @click="resetTeacherInfo()" size="small">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="pagination.records" border size="small">
      <el-table-column fixed="left" prop="studentName" label="姓名"></el-table-column>
      <el-table-column prop="cardId" label="身份证号"></el-table-column>

      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="tel" label="联系方式"></el-table-column>
      <el-table-column  label="操作">
        <template slot-scope="scope">
          <el-button @click="checkGrade(scope.row.studentId)" type="primary" size="small">编辑</el-button>
          <el-button @click="deleteById(scope.row.studentId)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[6, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      class="page">
    </el-pagination>
    <!-- 编辑对话框-->
    <el-dialog
      title="编辑普通用户信息"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
      <section class="update">
        <el-form ref="form" :model="form" label-width="100px" :rules="rules" size="small">
          <el-form-item label="姓名" prop="studentName" >
            <el-input v-model="form.studentName" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="cardId">
            <el-input v-model="form.cardId" placeholder="请输入身份证号"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio v-model="form.sex" label="男">男</el-radio>
            <el-radio v-model="form.sex" label="女">女</el-radio>
          </el-form-item>
          <el-form-item label="手机号" prop="tel">
            <el-input v-model="form.tel" placeholder="请输入手机号" disabled></el-input>
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input v-model="form.pwd" placeholder="请输入密码" type="password"></el-input>
          </el-form-item>
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submit()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        pagination : {
          //分页后的考试信息
          current : 1 , //当前页
          total : null , //记录条数
          size : 10 , //每页条数
        } ,
        dialogVisible : false , //对话框
        form : {} , //保存点击以后当前试卷的信息
        rules : {
          studentName : [
            { required : true , message : "姓名不能为空" , trigger : "blur" }
          ] ,
          cardId : [
            { required : true , message : "身份证号不能为空" , trigger : "blur" }
          ] ,
          pwd : [
            { required : true , message : "用户密码不能为空" , trigger : "blur" } ,
            { min : 5 , max : 20 , message : '用户密码长度必须介于 5 和 20 之间' , trigger : 'blur' }
          ] ,
          email : [
            {
              type : "email" ,
              message : "请输入正确的邮箱地址" ,
              trigger : ["blur" , "change"] ,
              required : true
            }
          ] ,
          tel : [
            {
              pattern : /^1[3|4|5|6|7|8|9][0-9]\d{8}$/ ,
              message : "请输入正确的手机号码" ,
              trigger : "blur" ,
              required : true
            }
          ]
        },
        formInline:{
          name:'',
          tel:''
        }
      };
    } ,
    created () {
      this.getStudentInfo ();
    } ,
    methods : {
      resetTeacherInfo(){
        this.formInline.name = ''
        this.formInline.tel = ''
        this.getStudentInfo()
      },
      getStudentInfo () {
        //分页查询所有试卷信息
        this.$axios (
          {
            methods: 'get',
            url: '/api/students',
            params: {
              page:this.pagination.current,
              size:this.pagination.size,
              name:this.formInline.name,
              tel:this.formInline.tel
            }
          }).then ( res => {
          this.pagination = res.data.data;
        } ).catch ( error => {
        } );
      } ,
      //改变当前记录条数
      handleSizeChange ( val ) {
        this.pagination.size = val;
        this.getStudentInfo ();
      } ,
      //改变当前页码，重新发送请求
      handleCurrentChange ( val ) {
        this.pagination.current = val;
        this.getStudentInfo ();
      } ,
      checkGrade ( studentId ) { //修改咨询者信息
        this.dialogVisible = true
        this.$axios ( `/api/student/${ studentId }` ).then ( res => {
          this.form = res.data.data
        } )
      } ,
      deleteById ( studentId ) { //删除当前咨询者
        this.$confirm ( "确定删除当前咨询者吗？删除后无法恢复" , "Warning" , {
          confirmButtonText : '确定删除' ,
          cancelButtonText : '算了,留着吧' ,
          type : 'danger'
        } ).then ( () => { //确认删除
          this.$axios ( {
            url : `/api/student/${ studentId }` ,
            method : 'delete' ,
          } ).then ( res => {
            this.getStudentInfo ()
          } )
        } ).catch ( () => {

        } )
      } ,
      submit () { //提交更改
        this.$refs[ "form" ].validate ( valid => {
          if ( valid ) {
            this.$axios ( {
              url : '/api/student' ,
              method : 'put' ,
              data : {
                ... this.form
              }
            } ).then ( res => {
              if ( res.data.code == 200 ) {
                this.$message ( {
                  message : '更新成功' ,
                  type : 'success'
                } )
              }
              this.dialogVisible = false
              this.getStudentInfo ()
            } )
          }
        } )
      } ,
      handleClose ( done ) { //关闭提醒
        this.$confirm ( '确认关闭？' )
          .then ( _ => {
            done ();
          } ).catch ( _ => {
        } );
      } ,

    }
  };
</script>
<style lang="scss" scoped>
  .all {
    padding: 0px 40px;

    .page {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .edit {
      margin-left: 20px;
    }

    .el-table tr {
      background-color: #dd5862 !important;
    }
  }

  .el-table .warning-row {
    background: #000 !important;
  }

  .el-table .success-row {
    background: #dd5862;
  }
</style>
